import React,{ useState,useEffect } from 'react'
import { Outlet } from 'react-router-dom'
import { TabBar } from 'antd-mobile'
import {
  UnorderedListOutline,
  SmileOutline,
  MessageOutline,
  MovieOutline,
  FolderOutline,
} from 'antd-mobile-icons'
import { useNavigate } from 'react-router-dom'

export default function App() {
  const [activeKey, setActiveKey] = useState('/shou')
  const navigate = useNavigate()
  
  const tabs = [
    {
      key: '/shou',
      title: '首页',
      icon: <FolderOutline />,
      activeIcon: <FolderOutline style={{ color: '#e43130' }} />
    },
    
    {
      key: '/filters',
      title: '分类',
      icon: <UnorderedListOutline />,
      activeIcon: <UnorderedListOutline style={{ color: '#e43130' }} />
    },
    {
      key: '/chat',
      title: '消息',
      icon: <MessageOutline />,
      activeIcon: <MessageOutline style={{ color: '#e43130' }} />
    },
    {
      key: '/person',
      title: '个人中心',
      icon: <SmileOutline />,
      activeIcon: <SmileOutline style={{ color: '#e43130' }} />
    }
  ]

  useEffect(() => {
    navigate(activeKey)
  }, [activeKey])

  return (
    <div style={{ backgroundColor: '#f5f5f5', minHeight: '100vh' }}> {/* 添加京东风格背景色 */}
        <Outlet />
      <div style={{
        position:'fixed',
        bottom:'0',
        width:'120rem',
        backgroundColor:'white',
        borderTop: '1px solid #eee',
        boxShadow: '0 -1px 3px rgba(0,0,0,0.1)'
      }}>
        <TabBar activeKey={activeKey} onChange={setActiveKey}>
          {tabs.map(item => (
            <TabBar.Item 
              key={item.key} 
              icon={item.icon}
              activeIcon={item.activeIcon}
              title={item.title}
              style={{
                '--active-color': '#e43130',
                '--icon-size': '5.5rem'
              }}
            />
          ))}
        </TabBar>
      </div>
    </div>
  )
}
